<script lang="jsx">
import { defineComponent, ref } from "vue"
import { ElMessage } from 'element-plus'
import { start } from "@/api/service-event"
import DynamicTable from "@/components/DynamicTable"

export default defineComponent({
  name: "StartFlow",
  components: {
    DynamicTable,
  },
  setup (props, { emit }) {
    /**
     * 弹窗控制
     */
    const dialogVisible = ref(false);
    const flowInfo = ref({})
    const handleOpen = (info) => {
      dialogVisible.value = true
      flowInfo.value = info
    }
    const handleClose = () => {
      dialogVisible.value = false
      flowInfo.value = {}
    }

    /**
     * 初始参数
     */
    const paramsList = ref([]); // 参数列表
    const tableColumns = ref([
      {
        label: "参数",
        render: (h, params) => <el-Input v-model={params.row.name} />,
      },
      {
        label: "值",
        render: (h, params) => <el-Input v-model={params.row.value} />,
      },
      {
        label: "操作",
        width: 100,
        render: (h, params) => (
          <el-button type="text" onClick={() => delParams(params)}>
            删除
          </el-button>
        ),
      },
    ]);

    // 新增参数
    const addParams = () => {
      if (!Array.isArray(paramsList.value)) {
        paramsList.value = [];
      }
      paramsList.value.push({ name: "", value: "" });
    };

    // 删除参数
    const delParams = (params) => {
      paramsList.value.splice(params.index - 1);
    };

    /**
     * 执行流程
     */
    const handleStart = async () => {
      const params = {}
      paramsList.value.forEach(item => {
        params[item.name] = item.value
      })
      JSON.stringify(paramsList.value)
      const res = await start(flowInfo.value.name, params)
      if (res.status === 200 || res.status === 201) {
        ElMessage({
          type: 'success',
          message: '执行成功!'
        });
      } else {
        ElMessage({
          type: 'warning',
          message: res.message
        });
      }
      handleClose()
    }

    return {
      dialogVisible,
      handleOpen,
      handleClose,
      paramsList,
      tableColumns,
      addParams,
      handleStart
    };
  },
});
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="开始"
    width="30%"
    custom-class="start-flow"
    @closed="handleClose"
  >
    <div class="label">参数信息</div>
    <div class="params-table">
      <DynamicTable
        :data="paramsList"
        :columns="tableColumns"
        :showPagination="false"
        :style="{ width: '100%', marginBottom: '10px' }"
      />
      <el-button
        type="primary"
        @click="addParams"
      >
        添加参数
      </el-button>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          @click="handleStart"
        >
          开始
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.params-table {

  :deep(.el-table__body-wrapper),
  :deep(.el-scrollbar__wrap) {
    height: auto !important;
  }


}
</style>